new Vue({
  el: '#main',
  data: {
    unfold: null,
    queryGroup: {
      changeType: '',
      changeReason: '',
      startDate: '',
      endDate: '',
      fuzzy: false,
    },
    // 分页列表数据
    logs: null,
    // 分页数据
    pagination: null,
  },
  computed: {
    unfoldOrfold() {
      return this.unfold ? '收起' : '展开'
    },
    // isAll: {
    //   get() {
    //     return this.logs ? this.logs.every((item) => item.checked) : false
    //   },
    //   set(value) {
    //     this.logs.forEach((item) => (item.checked = value))
    //   },
    // },
  },
  methods: {
    getInitStatus() {
      // 折叠页是否展开状态赋值
      this.unfold = this.$refs.collapse.classList.contains('show')
    },
    toggle() {
      this.unfold = !this.unfold
    },
    query(targetPage) {
      // 预留查询方法
      let data = {
        type: 'query',
        queryGroup: this.queryGroup,
      }
      if (this.pagination && targetPage && typeof targetPage != "object") data.pageNum = targetPage
      $.ajax({
        url: '#!',
        type: 'POST',
        data: JSON.stringify(data),
        contentType: 'application/json;charset=utf-8',
        dataType: 'json',
        success: (data) => {
          // console.log(data)
          if (data.status) {
            // 获取分页信息
            this.$set(this, 'pagination', data.pagination)
            // 获取列表信息
            // data.pagination.list.forEach((item) => {
            //   item.checked = false
            // })
            this.$set(this, 'logs', data.pagination.list)
          }else {
            this.$set(this, 'pagination', null)
            this.$set(this, 'list', null)
          }
          this.alert(data.msg, data.status ? 'success' : 'danger', 1500)
        },
        error: (XMLHttpRequest, textStatus, errorThrown) => {
          // console.log('状态码：', XMLHttpRequest.status)
          // console.log('状态：', XMLHttpRequest.readyState)
          // console.log('错误信息：', errorThrown)
          this.alert('系统错误：' + errorThrown, 'danger', 1500)
        },
      })
    },
    exportInfo() {
      // 预留导出方法
      let data = {
        type: 'export',
      }
      $.ajax({
        url: '#!',
        type: 'POST',
        data: JSON.stringify(data),
        contentType: 'application/json;charset=utf-8',
        dataType: 'json',
        success: (data) => {
          this.alert(data.msg, data.status ? 'success' : 'danger', 1500)
        },
        error: (XMLHttpRequest, textStatus, errorThrown) => {
          // console.log('状态码：', XMLHttpRequest.status)
          // console.log('状态：', XMLHttpRequest.readyState)
          // console.log('错误信息：', errorThrown)
          this.alert('系统错误：' + errorThrown, 'danger', 1500)
        },
      })
    },
    importInfo() {
      // 预留导入方法
    },
    setDate(e) {
      // 输入组有联动，阻止冒泡避免多次触发
      e.stopPropagation()
      // 向响应式对象动态更新数据
      // console.log($('#startDate').val(), $('#endDate').val())
      this.$set(this.queryGroup, 'startDate', $('#startDate').val())
      this.$set(this.queryGroup, 'endDate', $('#endDate').val())
    },
    alert(msg, type, delay) {
      // 三个参数依次为提示信息（string），提示类型（string），delay（滞留时间，ms为单位）
      $.notify(
        {
          message: msg,
        },
        {
          type: type,
          placement: {
            from: 'top',
            align: 'center',
          },
          z_index: 10800,
          delay: delay,
          animate: {
            enter: 'animate__animated animate__shakeX',
            exit: 'animate__animated animate__fadeOutDown',
          },
        }
      )
    },
  },
  created() {
    this.query()
  },
  mounted() {
    // bootstrap-datepicker组件 日期范围选择器 触发日期改变事件时获取值
    $('#datepicker').on('changeDate', this.setDate)
    this.getInitStatus()
  },
})

// bootstrap-datepicker组件 日期范围选择器 基础配置
let datepicker = $("[data-provide = 'datepicker']")
let options = {
  language: 'zh-CN', // 默认简体中文
  multidateSeparator: ', ', // 默认多个日期用,分隔
  // autoclose: true, //选中之后自动隐藏日期选择框
  clearBtn: true, //清除按钮
  format: 'yyyy-mm-dd', //日期格式
  forceParse: true, // 是否强制分析输入值
  startDate: '2000-01-01', // 初始日期
  endDate: new Date().toLocaleDateString(), // 结束日期
}

options = $.extend(options, getDataOptions(datepicker))
// 在元素原指定配置项上合并新配置项

if (datepicker.prop('tagName') != 'INPUT') {
  options.inputs = [datepicker.find('input:first'), datepicker.find('input:last')]
  // 逻辑即当元素为输入组则构建范围选择器
}

datepicker.datepicker(options)
